<template>
  <div class="home">
    <div class="info">
      <div v-for="item in datas">
        <info :title="item.title">
          <div v-if="item.id == 1" class="item">
            <e-digital-flop color="#17f" :value="1563" :separator="','" />
            <b>￥</b>
          </div>
          <div v-if="item.id == 2" class="item">
            <e-gauge-chart :value="66" style="width:100px;height:100px;" />
          </div>
          <div v-if="item.id == 3" class="item">
            <e-water-level-pond backgroundColor="grey" style="width:100px;height:100px;" :value="56" />
          </div>
          <div v-if="item.id == 4" class="item">
            <Date></Date>
          </div>
        </info>
      </div>
    </div>
    <div class="bodytwo">
      <BaseEChart class="echarts" :chartOption="option" :theme="theme"></BaseEChart>
      <a-carousel autoplay>
        <img src="https://img.moehu.org/pic.php?id=img1" alt="">
        <img src="https://img.moehu.org/pic.php?id=img2" alt="">
        <img src="https://img.moehu.org/pic.php?id=pc" alt="">
        <img src="https://t.mwm.moe/pc" alt="">
      </a-carousel>
    </div>
    <div class="video">
      <BaseVideo id="homeVideo" :autoplay="true" :loop="true" videoUrl="http://api.yujn.cn/api/pcfjsp.php?">
      </BaseVideo>
      <FScrollRank :data="itemScroll" :toggleDur="5000" order="" :showPercent="false" :showRatio="false" :pageSize="7"
        :togglePage="7" :valueFormatter="valueFormatter" class="sc">
      </FScrollRank>
    </div>
  </div>
</template>

<script setup lang="ts">
import info from '@/views/home/info.vue'
import { EDigitalFlop, EWaterLevelPond, EGaugeChart } from 'e-datav-vue3'
import BaseEChart from '@/components/BaseEcharts/index.vue'
import { ref, watch, onMounted } from 'vue'
import themeOptions from '@/store/theme'
import { weatherInfo7, allNews } from '@/api/index'
import * as echarts from 'echarts'
const datas = [
  { id: 1, title: '当日成交额度' },
  { id: 2, title: '计划执行率' },
  { id: 3, title: '成交率' },
  { id: 4, title: '时间' },
]

const itemScroll: any = ref([])
const theme = ref('light')
const themeOpt = themeOptions()

const option: any = ref({
  title: {
    text: ''
  },
  tooltip: {
    trigger: 'axis',
  },
  legend: {
    data: ['低温', '高温'],
  },
  calculable: true,
  xAxis: {
    type: 'category',
    boundaryGap: false,
    data: [],
    axisLabel: {
    }
  },
  yAxis: {
    type: 'value',
    axisLabel: {
      formatter: '{value} °C',
    }
  },
  series: [
    {
      name: '低温',
      type: 'line',
      data: [],
      label: {
        show: true,
        position: 'top',
      },
      areaStyle: {
        opacity: 0.8,
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          {
            offset: 0,
            color: 'rgba(0, 221, 255,0)'
          },
          {
            offset: 1,
            color: 'rgb(77, 119, 255,0.5)'
          }
        ])
      },
    },
    {
      name: '高温',
      type: 'line',
      data: [],
      label: {
        show: true,
        position: 'top',
      },
      areaStyle: {
        opacity: 0.8,
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          {
            offset: 0,
            color: 'rgb(255, 191, 0,0.5)'
          },
          {
            offset: 1,
            color: 'rgb(255, 191, 0,0)'
          }
        ])
      },
    }
  ]
})
const getData = async () => {
  const res = await weatherInfo7({ city: '海盐' })
  option.value.title.text = res.data.city
  const regex = /(\d+)-(\d+)/; // \d+ 匹配一个或多个数字  
  let dates: any = []
  let lows: any = []
  let heis: any = []
  res.data.data.forEach((el: any) => {
    dates.push(el.date)
    const datas = el.temperature.match(regex)
    lows.push(datas[1])
    heis.push(datas[2])
  })
  option.value.xAxis.data = dates
  option.value.series[0].data = lows
  option.value.series[1].data = heis

  const res2 = await allNews()
  itemScroll.value = res2.data[0].data.map((el: any) => {
    const obj = {
      name: el.title,
      value: el.hot.slice(0, el.hot.length - 1) != 'NaN' ? el.hot.slice(0, el.hot.length - 1) * 1 : 0
    }
    return obj
  })
}
const valueFormatter = ({ value }: { value: any }) => {
  return value + "万"
}
watch(() => themeOpt.checked, (newValue) => {
  !newValue ? theme.value = 'dark' : theme.value = 'light'
})
onMounted(() => {
  getData()
})

</script>

<style scoped lang="scss">
.home {
  width: 100%;
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  @include scroll-bar();
  padding: 5px;

  .info {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;

    .item {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 110px;

      b {
        font-size: 35px;
        color: #17f;
      }
    }
  }

  .bodytwo {
    display: grid;
    grid-template-columns: 1fr 500px;
    gap: 10px;
    margin: 10px 0;

    .echarts {
      height: 300px;
      padding: 5px;
      box-shadow: 1px 2px 2px 1px rgba(128, 128, 128, 0.202);
      border: 1px solid rgba(128, 128, 128, 0.188);
      border-radius: 3px;
      overflow: hidden;
    }
  }

  .video {
    height: 400px;
    border: 1px solid grey;
    display: grid;
    gap: 10px;
    grid-template-columns: 1fr 500px;
    box-shadow: 1px 2px 2px 1px rgba(128, 128, 128, 0.202);
    border: 1px solid rgba(128, 128, 128, 0.188);
    border-radius: 3px;
    overflow: hidden;

    .sc {
      padding: 10px;
      background-color: black;

      :deep(.f-scroll-rank__list) {
        width: 100%;

        .f-scroll-rank__item-info {
          .f-scroll-rank__item-info-right {
            display: flex;
            justify-content: right;
          }
        }
      }
    }
  }
}

:deep(.ant-carousel) {
  height: 100%;
  position: relative;
  box-shadow: 1px 2px 2px 1px rgba(128, 128, 128, 0.202);
  border: 1px solid rgba(128, 128, 128, 0.188);
  border-radius: 3px;

  .slick-slide {
    text-align: center;
    overflow: hidden;
    height: 300px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;

    img {
      width: 100%;
    }
  }
}
</style>